<template>
    <div>
    <NavSimple></NavSimple>
    <div class="page-wrap">
		<div class="w">
			<div class="user-con">
				<div class="user-title">用户登录</div>
				<div class="user-box">
					<div class="error-item" >
                        <i class="fa fa-minus-circle error-icon"></i>
                        <p class="err-msg"></p>
					</div>
					<div class="user-item">
						<label class="user-label" for="username">
							<i class="fa fa-user-o" aria-hidden="true"></i> 
						</label>
						<input type="text" class="user-content" id="username" name="username" placeholder="请输入您的用户名" autocomplete="off" :value="username"/>
					</div>
					<div class="user-item">
						<label class="user-label" for="password">
							<i class="fa fa-key"></i>
						</label>
						<input type="password" class="user-content" id="password" name="password" placeholder="请输入您的密码" autocomplete="off" :value="password"/>
					</div>
					<span id="submit" class="btn btn-submit">登录</span>
					<div class="link-item">
						<a class="link" href="/password-reset" target="_blank">忘记密码</a>
						<a class="link" href="/register"  target="_blank">注册</a>
					</div>	
				</div>	
			</div>
		</div>	
	</div>
    <Footer></Footer>
    </div>	
</template>

<script>
import {doUserLogin, doGetCartProductCount} from '@/api/commonApi'
import store from "@/store";
import NavSimple from "@/views/layout/nav-simple.vue";
import Footer from "@/views/layout/footer.vue";
export default {
    name: "login",
    components: {NavSimple, Footer},
    data: function() {
      return {
          username: "admin",
          password: "123456"
      }
    },
    mounted: function(){
        let _this = this;
        $('#submit').click(function(){
            _this.login();
        });
        // 如果按下回车，也进行提交
        $('.user-content').keyup(function(e){
            // keyCode == 13 表示回车键
            if(e.keyCode === 13){
                _this.login();
            }
        });
    },
    methods: {
        formErrorShow(errMsg){
            $('.error-item').show().find('.err-msg').text(errMsg);
        },
        formErrorHidden(){
            $('.error-item').hide().find('.err-msg').text('');
        },
        login () {
            let _this = this;
            var formData = {
                username : $.trim($('#username').val()),
                password : $.trim($('#password').val())
            },
            // 表单验证结果
            validateResult = _this.formValidate(formData);
            // 验证成功
            if(validateResult.status){
                formData.password = hexMd5(formData.password, KEY)
                doUserLogin(formData).then((res) => {
                    if(res.data.status === 200){
                        store.commit("setUser", res.data.data.userDto);
                        SessionStorage.set("user_token", res.data.data.token)
                        doGetCartProductCount().then((res) => {
                            if(res.data.status === 200){
                                store.commit("setCartCount", res.data.data)
                            }
                            window.location.href = Tool.getUrlParam('redirect') || "/index"
                        })
                    } else {
                        Toast.warning(res.data.message);
                    }
                })
            }
            // 验证失败
            else{
                // 错误提示
                Toast.warning(validateResult.message);
                _this.formErrorShow(validateResult.message)
            }
        },
        formValidate: (formData) => {
            var result = {
                status  : false,
                message : ''
            };
            if(!Tool.validate(formData.username, 'require')){
                result.message = '用户名不能为空';
                return result;
            }
            if(!Tool.validate(formData.password, 'require')){
                result.message = '密码不能为空';
                return result;
            }
            // 通过验证，返回正确提示
            result.status   = true;
            result.message  = '验证通过';
            return result;
        }
    }
}
</script>
<style scoped>
/* 最外层容器 */
.page-wrap{
    padding: 40px 0;
    background: #e72955;
}
/* 表单框 */
.user-con{
    position: relative;
    margin: 0 auto;
    width: 400px;
    background: #fff;
}
.user-con .user-title{
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    color: #666;
}
.user-con .user-box{
    padding: 20px;
}
/* 错误提示框 */
.user-con .user-box .error-item{
    position: relative;
    padding: 4px 0 4px 40px;
    margin-bottom: 10px;
    border: 1px solid red;
    color: red;
    background: #fde9e9;
    display: none;
}
/* 错误图标 */
.user-con .user-box .error-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    font-size: 14px;
    margin-top: -7px;
}

.user-con .user-item{
    position: relative;
    margin-bottom: 20px;
}
.user-con .user-item .user-label{
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 40px;
    line-height: 36px;
    background: #f3f3f3;
    font-size: 18px;
    color: #d3d3d3;
    text-align: center;
    border-right: 1px solid #bdbdbd;
}
.user-con .user-item .user-content{
    padding: 10px 0 10px 50px;
    width: 308px;
    height: 18px;
    line-height: 18px;
    font-size: 15px;
    border: 1px solid #bdbdbd;
    outline: none;
}
.user-con .btn-submit{
    width: 100%;
    padding: 2px 0;
    text-align: center;
    font-size: 20px;
}
/* 跳转链接 */
.user-con .link-item{
    text-align: right;
    margin-top: 10px;
}
.user-con .link-item .link{
    margin-left: 10px;
    color: #999;
	font-size: 15px;
}
._tilte{
	text-align: center;
	color: #999;
}
</style>